<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>高级选择器</title>
    <style>
        /* 选中.p1里面的第一个汉子或者字母 */
        .p1::first-letter {
            /* color: red;
            border:1px solid black */
        }

        /* 选中.p1里面的第一行 ，他是一个动态的*/
        .p1:first-line {
            color: green;
        }

        /* 在.box里面的最前面插入内容 */
        .box::before {
            content: 'befor插入的';
        }

        /* 在.box里面的最后面插入内容 */
        .box::after {
            /* content这个属性必须写 */
            /* content: 'after插入的'; */
            /* content:url('gitee.ico') */
            /* 如果不需要插入文字或者图片，一定要把content设置为'' */
            content: '';
            width: 50px;
            height: 50px;
            /* 设置边框的圆角 */
            border-radius: 50%;
            /* 设置背景颜色 */
            background-color: rgb(137, 204, 99);
            /* 转换成行内块元素 */
            display: inline-block;
        }

        /* 选择artlce后代的元素且该元素中在自己的兄弟中是老大 */
        /* article :first-child{
            color: red;
        } */
        /* 选择artlce子代的元素且该元素中在自己的兄弟中是老大 */
        /* article > :first-child{
            color: red;
        } */
        /* article :last-child{
            color: hotpink;
        } */
        /* article > :last-child{
            color: hotpink;
        } */
        /* 在main元素的后代中，选择h3标签，且该元素在他兄弟里面是第一个出现的h3 */
        /* main h3:first-of-type {
            color: blue;
        } */
        /* main  h3:last-of-type{
            color: orange;
        } */
        /* 选择mian 的后代且该元素是独子 */
        /* main :only-child{
            color: orangered;
        } */
        /* 在main 的后代元素中，该元素在自己的兄弟在是唯一的标签 */
        main :only-of-type{
            color: palegreen;
        }
    </style>
</head>

<body>
    <p class="p1">
        高级选择器区别于CSS普通选择器，它并非是通过HTML页面标签中一些可见的因素进行选择（如标签名，属性名、值，同级关系，嵌套结构等），也不是对一些简单的操作条件进行选择（如鼠标悬浮，鼠标点击，输入框获得焦点等），而是对标签元素的结构、标签元素的索引、标签元素的状态等一些更为复杂的条件下进行的选择，甚至能改变现有标签的状态结构。
    </p>

    <div class="box">

        box的内容
    </div>
    <article class="a1">
        <p>江山如此多娇，引无数英雄竞折腰。</p>
        <p>江山如此多娇，引无数英雄竞折腰。</p>
        <p>江山如此多娇，引无数英雄竞折腰。</p>
        <div>
            <span>span标签</span>
        </div>
        <p>江山如此多娇，引无数英雄竞折腰。</p>
    </article>
    <hr>
    <main>
        <section>江山如此多娇，引无数英雄竞折腰。section1 </section>
        <section>江山如此多娇，引无数英雄竞折腰。section2</section>
        <h3>江山如此多娇，引无数英雄竞折腰。h3 1</h3>
        
        <h3>江山如此多娇，引无数英雄竞折腰。h3 2</h3>
        <h3>江山如此多娇，引无数英雄竞折腰。h3 3</h3>
        <div>
           
            <h3>江山如此多娇，引无数英雄竞折腰。div-h3 1</h3>
            <h3>江山如此多娇，引无数英雄竞折腰。div-h3 2</h3>
        </div>
        <p>江山如此多娇，引无数英雄竞折腰。p 1</p>
        <div>
            <span>span标签</span>
        </div>
        <p>江山如此多娇，引无数英雄竞折腰。p2</p>
    </main>
</body>

</html>